<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <!--html html html html html html html html html html html html html html html html html html html -->
    <!--创建Vue-->
    <div id="app">
        {{message}}
    </div>
    <!--v-bind-->
    <div id="app2">
        <span v-bind:title="message">
            将鼠标置于此处，虽然并不能改变任何事情，
        </span>
    </div>
    <!--v-if-->
    <div id="app3">
        <p v-if="seen">这是一行被if控制存在的文字</p>
    </div>
    <!--v-for-->
    <div id="app4">
        <ol>
            小鱼吃：
            <li v-for="small in big">
                {{small.eat}}
            </li>
        </ol>
    </div>
    <!--v-on-->
    <div id="app5">
        <p>{{message}}</p>
        <button v-on:click="reverseMessage">反转消息</button>
    </div>
    <!--v-model-->
    <div id="app6">
        <p>{{message}}</p>
        <input v-model="message">
    </div>
    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--JS JS JS JS JS JS JS JS JS JS JS JS JS JS JS JS JS JS JS JS JS JS JS JS JS JS JS JS JS JS JS JS JS -->
    <!--创建Vue-->
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'下面，我们要做一个简单的测试。'
            }
        })
    </script>
    <!--v-bind-->
    <script>
        var app2 = new Vue({
            el:'#app2',
            data:{
                message:'但是你能让这行字出现在你面前。'
            }
        })
    </script>
    <!--v-if-->
    <script>
        var app3 = new Vue({
            el:'#app3',
            data:{
                seen:true
            }
        })
    </script>
    <!--v-for-->
    <script>
        var app4 = new Vue({
            el:'#app4',
            data:{
                big:[
                    {eat:'虾米'},
                    {eat:'浮游生物'},
                    {eat:'其它生物'}
                ]
            }
        })
    </script>
    <!--v-on-->
    <script>
        var app5 = new Vue({
            el:'#app5',
            data:{
                message:'述之术，得之形。'
            },
            methods:{
                reverseMessage:function(){
                    this.message=this.message.split('').reverse().join('');
                }
            }
        })
    </script>
    <!--v-model-->
    <script>
        var app6 = new Vue({
            el:'#app6',
            data:{
                message:'普普通通'
            }
        })
    </script>

</body>

</html>